js-04 自定义属性
一、获取元素的样式
- 标准浏览器中：ie浏览器不支持
getComputedStyle(元素).样式;
所有的点后面也可以用中括号代替，中括号需要加引号；
比如：getcomputedStyle(box)['width'];
- ie8以下浏览器获取样式的方法：
元素.currentStyle.样式； 也是可以用中括号写；
二、自定义属性
- 为什么要自定义属性：
如果声明一个flag为true，则所有的标签都是使用flag这个标识的，前一个改变，后一个因为使用的是前一个的标识，所以也改变了，则需要为每一个元素都添加一个标识，叫做自定义属性，每一个元素都有一个flag标识，就互不影响了；
- 自定义索引值：
索引一般用于下标一一对应的，比如抽奖翻牌，假设每个按钮对应的奖项都是定好了的，都存放在数组中，第一个按钮对应数组中第一个元素，依次类推。点击某个按钮就需要显示相对应下标的奖项，则我们需要把下标存下来，叫自定义索引（其实也是自定义属性）。
定义：div.name= value；
获取：div.name；
更改：div.name = new；
自定义属性值可以是任何数据类型的；
for(var i=0;i<odiv.length;i++){
odiv[i].flag = true; //给每个div加一个新的属性；
odiv[i].onclick = function(){
if(this.flag){ //如果这个div的这个flag属性为true，则改变；
this.style.background = "blue";
this.flag = false; //让这个div的flag属性为false
}else{
this.style.background = "red";
this.flag = true;
}
}
}
自定义属性解决的问题：
for(var j=0;j<li.length;j++){
li[j].onmouseover = function(){
this.style.background = arr[j]; //数组放在事件中是无法循环的
}
}
解决办法：
for(var j=0;j<li.length;j++){
li[j].flag = arr[j]; //给每个li起一个属性，并让属性值为数组中的某个颜色；
li[j].onmouseover = function(){
this.style.background = this.flag; //让这个颜色为这个属性值；
}
}
小方块需要点击两下：
for(var i=0;i<odiv.length;i++){
odiv[i].flag = true; //给每个div加一个新的属性；
odiv[i].onclick = function(){
if(this.flag){ //如果这个div的这个flag属性为true，则改变；
this.style.background = "blue";
this.flag = false; //让这个div的flag属性为false
}else{
this.style.background = "red";
this.flag = true;
}
}
}